<template>
    <div id='kind'>
        <div class='particulars'>
            <div class="left-list">
                <ul>
                    <li @click='op($event)' class="cur">分类</li>
                    <li v-for="(item,index) in kindlist" :key='index' @click='op($event,index)'>{{item.name}}</li>
                    
                </ul>
            </div>
            <div class="right-list">
                <div class="content">
                    <div v-for=" (item,index) in goodlist[curindex]" :key='index' class="demo">
                        <h6>{{item.name}}</h6>
                        <mu-flexbox wrap='wrap' justify="space-around" :gutter="0">
                            <mu-flexbox-item basis="28%" class="flex-demo"   v-for=" (item2,index) in item.childList" :key='index'>
                                <span  @click ='showinput(item2)'>{{item2.name}}</span>
                            </mu-flexbox-item>
                        </mu-flexbox>
                    </div>
                </div>
            </div>
        </div>
        <Maskbg v-show="search" v-on:mask-say='isshow' :cid="itemarr"></Maskbg>
    </div>
</template>
<script>
    import Maskbg from '../comments/mask.vue'
    import api from '../api/api.js'
    export default {
        data(){
            return{
                kindlist:[],
                goodlist:[],
                curindex:0,
                search:false,
                itemarr:"",
            }
        },
        components:{
            Maskbg
        },
        //保证进入路由遮罩层隐藏
        beforeRouteEnter(to, from, next){
            next(vm=>{
                vm.search = false
            })
        },
        created(){
            this.$http.get(api.getlykind()).then((res)=>{
                this.kindlist=res.data.showapi_res_body.typeList
                var _vm = this
                this.kindlist.forEach(function(value,index,arr){
                    // _vm.goodlist[index]=[...(value.childList)]
                    _vm.goodlist[index]=value.childList
                })
            })
        },
        methods:{
            op(event,index){
                var arr = event.currentTarget.parentNode.childNodes
                arr.forEach(function(value,index,arr){
                    value.className=''
                })
                event.currentTarget.className +=' cur';
                this.curindex=index
            },
            showinput(item2){
                this.search = true
                this.itemarr = item2
            },
            isshow(show){
                this.search = show
            }
        }
        

    }
</script>
<style lang="less" scoped>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    .kind{
        height: 100%;
    }
    .particulars{
        height: 100%;
        overflow: hidden;
        position: relative;
        .left-list{
            width: 24%;
            float: left;
            ul{
                li{
                    position: relative;
                    font-size: 13px;
                    padding: 0 15.5%;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    background-color: #f8f8f8;
                    overflow: hidden;
                    border-bottom: 1px solid #d7d7d7;
                    border-right: 1px solid #d7d7d7;
                    word-break: break-all;
                }
                li:first-child{
                    border-top: 1px solid #d7d7d7;
                }
                li.cur{
                    color: #009688;
                    background-color: #fff;
                    border-right: 1px solid #fff;
                }
                li.cur:after{
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    display: block;
                    border-left: 3px solid #009688;
                }
            }
        }
        .right-list{
            width: 76%;
            float: left;
            .content{
                padding-left: 7.01%;
                padding-right: 7.01%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                .demo{
                    margin: 20px 0;
                    h6{
                        color: #009688;
                    }
                }
                .flex-demo{
                    margin: 5px 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    height: 22px;
                    -webkit-box-orient: vertical;
                    text-align:justify;overflow: hidden;
                }
            }
        }
    }
</style>